<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<style type="text/css">
	.button{width: 100px;height: 30px;margin:3px 20px 3px 0;padding-top: 3px;}
	*{font-size: 14px;}
	.th td{font-weight: 700;}
	/* label{margin: 0 10px 0 18px;font-weight: 500;height: 25px;line-height: 25px;} */
     .control-label{padding: 0;font-weight: bold;}
     .diaform{margin: 20px auto;}
     h3{border-bottom:1px solid #ddd;padding-bottom:5px;width: 98%;  }
     .datagrid-view{border-top:1px solid #ddd;margin-top: 8px;}
     .datagrid-pager{border-bottom:1px solid #ccc;}
     hr{margin:15px 0 13px 0 ;background-color: #ddd;height: 1px;border: 0; width: 120%;}
     .jianju{margin-left:15px; }
     .datagrid-htable{
     font-weight:bold;
	/* background-color: #148CCA; */
	}
	.demo_line_01{
    
    margin: 5px 0;
    font-size: 50px;
    line-height: 1px;
    text-align: center;
	}
	.demo_line_01 .line{
	display:inline-block;
	   width:47.8%;
	   height:1px;
	   background:#ddd;
	   vertical-align:middle;
	   margin-top:8px;
	}
	.container-fluid{
	padding-left: 15px;
	}
	.datagrid-ftable td div{
		font-size: larger;
	
	}
	#pulldown{
		margin-top: 20px;
	}
	
/* td.datagrid-header-over{
	background: #148CCA !important;
} */
</style>
<title>角色功能设置</title>
<style type="text/css">
.datagrid-ftable {
	color: red;
	font-weight: bold;
}
.datagrid-body {
height:300px !important;
}
.datagrid-view {
height:360px !important;
}

</style>
<script src="${ctxStatic}/js/echarts.js"></script>
</head>
<body>
<div class="jianju">
<h3>角色功能设置</h3>

<div>
	角色名称 	<select id="roleName" class="easyui-combobox" style="width:120px" mode="remote"
					url="${ctx}/selectRole/roleName"
					valueField="roleId" textField="roleName" method="get" editable="false"
					panelHeight="auto">
			</select> 
	<input id="select" type="button"class="btn btn-xs"  value="查询">
</div>
<HR width="100%" color=#987cb9 SIZE=10 />
<table id="tabid" class="table table-hover">
	<thead>
		<tr id="ttr">
			<th>No.</th>
			<th>功能名称</th>
			<th>功能所属菜单</th>
			<th>设置权限</th>
		</tr>
	</thead>
	<tbody>
    <c:forEach items="${list}" var="u"  varStatus="uid">>
        <tr >
        	<td>
                    ${uid.count}
            </td>
            <td>
                    ${u.buttonName}
            </td>
            <td>
                    ${u.menuName}
            </td>
            <td>
            		<input id=${u.buttonId } name=ele type=checkbox />
            </td>
       	</tr>
     </c:forEach>
         </tbody>
</table>
<input id="save" type="button" class="btn btn-success btn-sm" value="保存">
</body>
<script>
$(function(){
	//设置下拉框默认选中"请选择"
	$('#roleName').combobox({onLoadSuccess:function(){
		var data = $('#roleName').combobox('getData');
		if(data){
 			$("#roleName").combobox('select',data[0].userAccount);
		}
	}
	})
})
$(function() {
		$("#select").click(
				function() {
					$.get("${ctx}/selectRole/funButton?roleId="+ $("#roleName").combobox("getValue") , function(data, status) {
						var list=data;
						var snapinfo_table = document.getElementById("tabid");  
					    var snapinfo_tr_num = snapinfo_table.rows.length;  
					    for(var i=snapinfo_tr_num-1;i>0;i--){  
					             snapinfo_table.deleteRow(i);  
					    }  
						for(var i=0;i<list.length;i++){
							var buttonId=list[i].buttonId
							var tr=document.createElement("tr");
						   	var td1=document.createElement("td");
						   	td1.innerHTML=i+1;
						   	var td2=document.createElement("td");
						   	td2.innerHTML=list[i].buttonName
						   	var td3=document.createElement("td");
						   	td3.innerHTML=list[i].menuName
						   	var td4=document.createElement("td");
						   	if(list[i].useful==1){
						   		td4.innerHTML="<input id="+buttonId+" name=ele type=checkbox checked=true />";
						   	}else{
						   		td4.innerHTML = "<input id="+buttonId+" name=ele type=checkbox />";
						   	}
						   	tr.appendChild(td1);
						   	tr.appendChild(td2);
						   	tr.appendChild(td3);
						   	tr.appendChild(td4);
						   	$("table").append(tr);
						}						
					})
				})
	})
$(function(){
	$("#save").click(function(){
	    var eles=document.getElementsByName('ele');
	    var buttonIds="";
		for(var i=0;i<eles.length;i++){
			if(eles[i].checked){
				buttonIds+=eles[i].id+","
			}
		}
		$.get("${ctx}/selectRole/updateFunButton?roleId="+ $("#roleName").combobox("getValue")+"&buttonIds="+buttonIds,function(data, status){
			if(data==0){
				alert("请选择角色")
			}
			if(data==1){
				alert("更新成功")
			}
		})
	})
})
</script>
</html>